<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景固定与滚动条</title>

        <style>
            /* background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
               fixed 自己滚动条不动，外部滚动条不动
               local 自己滚动条动，外部滚动条动
               scroll 自己滚动条不动，外部滚动条动（默认值）

               纵向溢出的内容，用滚动条显示
               overflow-y:scroll;
            */

            .box1 {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                /* 纵向溢出的内容，用滚动条显示 */
                overflow-y:scroll;
                background-image: url(sg.jpg);
                /* fixed 拖动盒子内的滚动条 背景图像不动，拖动外部的滚动条 背景图像也不动 */
                /* background-attachment:fixed; */
                /* local 拖动盒子内的滚动条 背景图像动，拖动外部的滚动条 背景图像也动 */
                background-attachment:local;
                /* scroll 拖动盒子内的滚动条 背景图像不动，拖动外部的滚动条 背景图像动 */
            }

            body {
                height: 3000px;
            }

            p {
                color:white;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
    </body>
</html>